<template>
	<view>
			<view class="container">
				<view class='edit-container'>
					<view class="a-item">
						<view class="icon">
							<image class="img" src="/static/images/icon/receiver.png"></image>
						</view>
						<view class="input-wrap">
							<input cursor-spacing='100' v-model="formData.name" class='a-input' placeholder='姓名'></input>
						</view>
					</view>
					<view class="a-item">
						<view class="icon">
							<image class="img" src="/static/images/icon/mobile.png"></image>
						</view>
						<view class="input-wrap">
							<input cursor-spacing='100' v-model="formData.mobile" class='a-input' type='number' placeholder='手机号码'></input>
						</view>
					</view>
					<view class="a-item">
						<view class="icon">
							<image class="img" src="/static/images/icon/position.png"></image>
						</view>
						<view class="input-wrap">
							<input cursor-spacing='100' @click="chooseRegion"  :value="full_region" class="a-input" disabled="true" placeholder="选择省份、城市、区县" />
							<view class="arrow"></view>
						</view>
					</view>
					<view class="a-item">
						<view class="icon">
							<image class="img" src="/static/images/icon/address.png"></image>
						</view>
						<view class="input-wrap">
							<input cursor-spacing='100' v-model="formData.address" class="a-input" placeholder="详细地址, 如街道、小区或写字楼等" />
						</view>
					</view>
				</view>
				<view class="default-wrap">
					<view class="text">设为默认地址</view>
	                <!--这里用的 uview组件库的开关-->
					<u-switch class="switch" v-model="formData.is_default" :activeValue="1" :inactiveValue="0"></u-switch>
				</view>
				<view class='btn-wrap'>
					<view class="btn active"  @click="saveAddress">保存</view>
				</view>
				<view v-if="addressId" class='delete-wrap'>
					<view class='btn' @click="delAddress">删除</view>
				</view>
				<view class="region-select" v-if="regionShow">
					<view class="hd">
						<view class="region-selected">
							<!-- <view class="item disabled selected">安徽省</view>
							<view class="item disabled selected">合肥市</view>
							<view class="item disabled selected">瑶海区</view> -->
							<view @click="selectRegionType(item,index)" v-for="(item,index) in selectRegionList" 
							:key="index" class="item" 
							:class="{ disabled: item.id*1 === 0,selected: item.type === regionType}"
							>{{item.name}}</view>
						</view>
						<view class="done" :class="{ disabled:confirmDisabled }" @click="doneSelectRegion">确定</view>
					</view>
					<view class="bd">
						<scroll-view scroll-y class="region-list">
							<!-- <view class="item selected">浙江省</view> -->
							<!-- 如何判断高亮呢？ -->
							<view class="item" v-for="item in regionList" :class="{ selected: item.selected  }" :key="item.id" @click="selectRegion(item)">{{item.name}}</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="bg-mask" @click="cancelSelectRegion" v-if="regionShow"></view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					name:'',  // 姓名
					mobile:'', // 手机号
					address:'', // 详细地址信息
					province_id:'', // 省份ID
					city_id:'',  // 城市ID
					district_id:'', // 区县ID
					is_default:0  // 是否默认
				},
				regionShow:false, // 弹框打开关闭
				selectRegionList: [  // 用于渲染顶部位置信息
					{ id: 0,name: '省份',parent_id: 1,type: 1 },
					// { id: 8,name: '吉林省',parent_id: 1,type: 1 },
					{ id: 0,name: '城市',parent_id: 1,type: 2 },
					{ id: 0,name: '区县',parent_id: 1,type: 3 }
				],
				regionType:1, // 1选择省份， 2选择城市， 3选择区县
				regionList:[],  // 地址列表  （省份数据、城市数据、区县数据）
				addressInfo:{
					province_name:'',
					city_name:'',
					district_name:''
				},
				addressId:''
			};
		},
		computed: {
			// 顶部确定按钮是否禁用
			confirmDisabled() {
				return this.selectRegionList.some(item=>item.id*1 === 0) 
			},
			// 完整名称
			full_region(){
				return   Object.values(this.addressInfo).join('')
			}
		},
		onLoad(options) {
			// 页面传入的数据
			this.addressId = options.id
			// 有ID说明是修改界面
			if(this.addressId){
				uni.setNavigationBarTitle({
					title:'修改地址'
				})
				// 获取地址数据
				this.getAddressInfo()
			}
		},
		methods: {
			// 根据ID获取修改地址的信息
			async getAddressInfo(){
				// 请求数据
				let res = await uni.$http.get('/address/addressDetail',{params:{ id:this.addressId }})
				// 赋值
				this.formData = res
				this.addressInfo.province_name = res.province_name
				this.addressInfo.city_name = res.city_name
				this.addressInfo.district_name = res.district_name
			},
			// 选择省市县
			chooseRegion(){
				this.regionShow = true
				// 是否选择过数据
				if(this.formData.province_id > 0 && this.formData.city_id > 0 && this.formData.district_id >0){
					this.selectRegionList[0].id = this.formData.province_id
					this.selectRegionList[0].name = this.addressInfo.province_name
					this.selectRegionList[0].parent_id =1
					this.selectRegionList[1].id = this.formData.city_id
					this.selectRegionList[1].name = this.addressInfo.city_name
					this.selectRegionList[1].parent_id = this.formData.province_id
					this.selectRegionList[2].id = this.formData.district_id
					this.selectRegionList[2].name = this.addressInfo.district_name
					this.selectRegionList[2].parent_id = this.formData.city_id
					// 设置类型为3级
					this.regionType =3 
					// 取3级的数据
					this.getRegionList(this.formData.city_id)
				}else{
					// 设置选中数组数据
					this.selectRegionList =  [  
					{ id: 0,name: '省份',parent_id: 1,type: 1 },
					{ id: 0,name: '城市',parent_id: 1,type: 2 },
					{ id: 0,name: '区县',parent_id: 1,type: 3 }
				]
					// 设置类型
					this.regionType = 1
					// 获取一级省份数据
					this.getRegionList(1)
				}
				
			},
			// 遮罩层点击，取消选择地址
			cancelSelectRegion(){
				this.regionShow = false
				//关闭的时候，如果没有都选择完，那就把类型设置回1，否则说明都选择完了设置为3
				this.regionType = this.confirmDisabled ? 1 : 3  
			},
			// 获取地区数据（省份、城市、区县）
			async getRegionList(parentId){
				// 请求数据
				let res = await uni.$http.get('/region/list',{
					params:{ parentId:parentId }
				})
				// 处理数据
				this.regionList = res.map(item=>{
					// item.selected 目的在于点击之后修改他为true，然后去高亮
					if(item.type === this.regionType &&  this.selectRegionList[this.regionType-1].id === item.id ){
						// 回显！
						item.selected = true
					}else{
						// 开始为0的状态
						item.selected = false
					}
					return item
				})
			},
			// 地址列表点击 【A列表要切换、B顶部高亮要切换、C列表的高亮也要切换、D地址列表切换要对下级进行重置 】
			selectRegion(row){
				//【B顶部高亮要切换】 数组.splice(索引开始位置,删除个数,添加内容)  // row.type 和 regionType 是一致的
				this.selectRegionList.splice(row.type-1,1,row)
				// 【A列表要切换】如果是省、市点击了还要继续获取，如果是县就不要再获取
				if(this.regionType !== 3){
					this.regionType++
					this.getRegionList(row.id) // 获取row下面的城市信息
				}
				// 【D地址列表切换要对下级进行重置】
				this.selectRegionList = this.selectRegionList.map((item,index)=>{
					// 下级重置
					// row.type 1,2,3 (点击)当前列表的类型    row.type-1  0 1 2   
					// 假设row.type是3，列表是县  不需要重置
					// 假设row.type是2，列表是市  县需要重置
					// 假设row.type是1，列表是省  市、县需要重置
					if(index > row.type -1){
						item.id = 0
						item.name = index === 1 ? '城市':'区县'
						item.parent_id = 1
					}
					return item
				})
				
				// 【C列表的高亮也要切换】 设置列表里面的高亮切换(点击的那个要亮，其他的要都是不亮)
				this.regionList = this.regionList.map(item=>{
					// item.selected 目的在于点击之后修改他为true，然后去高亮
					if(item.type === this.regionType &&  this.selectRegionList[this.regionType-1].id === item.id ){
						item.selected = true
					}else{
						item.selected = false
					}
					return item
				})
			},
			// 头部点击
			selectRegionType(val,idx){
				// 1、高亮不让点击、禁用不让点击、
				// idx只有可能是0,1,2    this.selectRegionList[idx]    regionType 1  2  3 
				if(val.type === this.regionType) return   // 高亮
				if(this.selectRegionList[idx].id === 0) return  // 禁用
				// 2、点击之后顶部的高亮要变化 , 列表要更新
				this.regionType = idx+1
				this.getRegionList(val.parent_id)
				// 3、重置行为
			},
			// 顶部完成事件
			doneSelectRegion(){
				// 禁用不要
				if(this.confirmDisabled) return
				// 收集地区ID给表单
				this.formData.province_id = this.selectRegionList[0].id
				this.formData.city_id = this.selectRegionList[1].id
				this.formData.district_id = this.selectRegionList[2].id
				// 收集名称给变量
				this.addressInfo.province_name = this.selectRegionList[0].name
				this.addressInfo.city_name = this.selectRegionList[1].name
				this.addressInfo.district_name = this.selectRegionList[2].name
				// 关闭弹框
				this.regionShow = false
			},
			// 地址保存事件
			async saveAddress(){
				 // 1. 数据的校验,不做细致的校验，只做空置的校验
				 const valueArr = Object.values(this.formData)
				 if(valueArr.some(item=>item === '')) return uni.showToast({
				 	title:'请填写完成',
					icon:'error'
				 })
				 // 2. 发生请求
				 await uni.$http.post('/address/saveAddress',this.formData)
				 // 3. 提示成功
				 uni.showToast({
				 	title:'操作成',
					icon:'success',
					duration:400
				 })
				 // 4. 跳转界面
				setTimeout(()=>{
					 uni.navigateBack()
				},400)
			},
			// 删除地址
			async delAddress(){
				// 弹出确认框
				let [err,res] = await uni.showModal({
					title:'提示',
					content:'确认退出吗？'
				})
				if(res.cancel) return
				// 发生删除请求
				await uni.$http.post('/address/deleteAddress',{ id:this.addressId })
				// 提示成功,返回
				uni.showToast({
					title:'删除成功',
					icon:'success',
					duration:500
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}
			
		},
	}
</script>

<style lang="scss">
page {
    min-height: 100%;
    background-color: #f8f8f8;
}

.container {
    min-height: 100%;
    /* align-items: stretch; */
    background: #f8f8f8;
    overflow-x: hidden;
    padding: 30rpx;
}

.edit-container {
    background: #fff;
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
}

.a-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30rpx;
}

.a-item .icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20rpx;
}

.a-item .icon .img {
    width: 36rpx;
    height: 36rpx;
}

.a-item .input-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 30rpx 30rpx 30rpx 0;
    border-bottom: 1rpx solid #f1f1f1;
}

.a-item:last-child .input-wrap {
    border-bottom: none;
}

.a-item .input-wrap .a-input {
    font-size: 28rpx;
    width: 100%;
}

.a-item .input-wrap .arrow {
    width: 10rpx;
    height: 10rpx;
    border-top: 4rpx solid #aaa;
    border-right: 4rpx solid #aaa;
    transform: rotate(45deg);
}

.a-input {
    font-size: 28rpx;
    width: 100%;
}

.confirm-box {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    /* border-top:1px solid #eee;  */
    background: linear-gradient(to right, #ff116a, #fe5b46);
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    font-size: 32rpx;
}

.default-input {
    font-size: 28rpx;
    color: #233445;
    line-height: 60rpx;
    margin: 0 auto;
    width: 300rpx;
}

.region-select {
    width: 100%;
    height: 600rpx;
    background: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
}

.region-select .hd {
    height: 108rpx;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 46rpx 30rpx 0 30rpx;
    box-sizing: border-box;
}

.region-select .region-selected {
    float: left;
    height: 60rpx;
    display: flex;
}

.region-select .region-selected .item {
    max-width: 140rpx;
    margin-right: 30rpx;
    text-align: left;
    line-height: 60rpx;
    height: 100%;
    color: #333;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-select .region-selected .item.disabled {
    color: #999;
}

.region-select .region-selected .item.selected {
    color: #ff3456;
}

.region-select .done {
    float: right;
    height: 60rpx;
    width: 60rpx;
    border: none;
    background: #fff;
    line-height: 60rpx;
    text-align: center;
    color: #ff3456;
    font-size: 28rpx;
}

.region-select .done.disabled {
    color: #999;
}

.region-select .bd {
    height: 492rpx;
    width: 100%;
    padding: 0 30rpx;
}

.region-select .region-list {
    height: 492rpx;
}

.region-select .region-list .item {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    text-align: left;
    color: #333;
    font-size: 28rpx;
}

.region-select .region-list .item.selected {
    color: #ff3456;
}

.bg-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
}

.default-wrap{
    background: #fff;
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.default-wrap .text{
    font-size: 28rpx;
}

.btn-wrap {
    width: 100%;
    padding: 24rpx 0;
    /* position: fixed;
    bottom: 0;
    left: 0; */
    box-sizing: border-box;
}

.btn-wrap .btn {
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 10rpx;
    width: 100%;
    color: #fff;
    background: #bbb;
    box-shadow: 0rpx 10rpx 20rpx #ccc;
}

.btn-wrap .btn.active {
    background: linear-gradient(to right, #ff3456, #ff347d);
    box-shadow: 0rpx 10rpx 20rpx #f1f1f1;
    color: #fff;
}

.delete-wrap {
    width: 100%;
    padding: 24rpx;
    /* position: fixed;
    bottom: 0;
    left: 0; */
    box-sizing: border-box;
}

.delete-wrap .btn {
    font-size: 28rpx;
    color: #5d6777;
    text-align: center;
}
</style>
